<template>
  <page-card title="任务管理-任务名称">
    <a-row>
      <a-col :span="4">
        <a-form-item :label-col="{ span: 8 }"
                     :wrapper-col="{ span: 16 }"
                     label="填报人">
          <a-input v-model="queryParam.jobName"
                   placeholder="请输入" />
        </a-form-item>
      </a-col>
      <a-col :span="4">
        <a-form-item :label-col="{ span: 8 }"
                     :wrapper-col="{ span: 16 }"
                     label="填报状态">
          <a-select default-value="0"
                    style="width: 100%;"
                    v-model="queryParam.status">
            <a-select-option value="0">
              全部
            </a-select-option>
            <a-select-option value="1">
              待填报
            </a-select-option>
            <a-select-option value="2">
              已填报
            </a-select-option>
            <a-select-option value="3">
              已逾期
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="5">
        <a-form-item :label-col="{ span: 8 }"
                     :wrapper-col="{ span: 16 }"
                     label="填报时间">
          <a-range-picker @change="timeOnChange" />
        </a-form-item>
      </a-col>
      <a-col :span="6"
             style="margin-left:5px;margin-top:3px;">
        <a-button type="primary">
          查询
        </a-button>
        <a-button style="margin-left:5px;">重置</a-button>
      </a-col>
    </a-row>
    <slot name="table" />
    <a-table v-if="!$slots.table"
             :columns="columns"
             :rowKey="(record, index) => index"
             :data-source="data"
             @change="handleTableChange"
             :pagination="pagination">
      <span slot="status"
            slot-scope="text, record">
        <a-tag color="pink">
          pink
        </a-tag>
      </span>
      <span slot="action"
            slot-scope="text, record">
        <template v-for="(action, index) in actions">
          <span :key="index">
            <a-divider type="vertical"
                       v-if="index > 0" />
            <a v-if="action.code != 'delete'"
               @click="action.fn(record.id, record.name)">
              {{ action.text }}
            </a>
            <a-popconfirm v-else
                          title="确认删除？"
                          ok-text="是"
                          cancel-text="否"
                          @confirm="action.fn(record.id)">
              <a href="javascript:;">
                {{ action.text }}
              </a>
            </a-popconfirm>
          </span>
        </template>
      </span>
    </a-table>
  </page-card>
</template>

<script>
import { PAGINATION, TABLE_STATUS_CELL } from '../../constants'
import { listTask, startTask, stopTask, deleteTask } from '../../api/quartz'
export default {
  props: {
    onLoad: {
      type: Function,
      default: null
    },
    onDelete: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      data: [],
      pagination: PAGINATION,
      statusCell: TABLE_STATUS_CELL,
      queryParam: {},
      actions: [],
      columns: [
        {
          title: '填报人',
          align: 'center',
          width: 100,
          dataIndex: 'createUser'
        },
        {
          title: '填报批次',
          align: 'center',
          width: 100,
          dataIndex: 'pici',
          ellipsis: true
        },
        {
          title: '填报状态',
          align: 'center',
          hidden: true,
          width: 100,
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '填报时间',
          align: 'center',
          width: 100,
          ellipsis: true,
          dataIndex: 'createTime'
        },
        {
          title: '截止日期',
          width: 100,
          align: 'center',
          dataIndex: 'endTime'
        },
        {
          title: '最后一次提醒',
          width: 100,
          align: 'center',
          dataIndex: 'lastWarn'

        }
      ]
    }
  },
  created () {
    let width = 180,
      me = this
    // if (this.hasPermission('edit') && (width += 28)) {
    this.actions.push({
      text: '提醒',
      code: 'edit',
      fn: this.handleEdit
    })
    this.actions.push({
      text: '详情',
      code: 'detail',
      fn: this.handleEdit
    })
    // }
    // if (this.hasPermission('delete') && (width += 28)) {
    this.actions.push({
      text: '退回重填',
      code: 'delete',
      fn: this.handleDelete
    })
    this.actions.push({
      text: '重发任务',
      code: 'delete',
      fn: this.handleDelete
    })

    // }
    // if (this.actions.length > 0) {
    this.columns.push({
      title: '操作',
      width: width,
      align: 'center',
      scopedSlots: { customRender: 'action' }
    })
    // }
    // 未重写table，调用默认加载列表数据接口
    !this.$route.meta.keepAlive && !this.$slots.table && this.load()
  },
  activated () {
    // 未重写table，调用默认加载列表数据接口
    !this.$slots.table && this.load()
  },
  methods: {
    onChange (id, status) {
      if (status == '1') {
        stopTask(id).then((res) => {
          this.load()
        })
      } else {
        startTask(id).then((res) => {
          this.load()
        })
      }
    },
    search () {
      this.pagination.current = 1
      this.load()
    },
    load () {
      this.queryParam.currPage = this.pagination.current
      this.queryParam.pageSize = this.pagination.pageSize
      this.data = [
        {
          jobName: '返工填报',
          appName: '公安内部应用',
          jinji: '一般',
          jindu: '1/4',
          warn: '已逾期(10)',
          status: '1',
          createUser: '张三',
          createTime: '2022-09-23 10:23',
          endTime: '2022-09-23 10:23'
        }
      ]
      if (this.onLoad) {
        // listTask({ ...this.queryParam }).then((response) => {
        //   this.data = response.list
        //   this.pagination.current = response.currPage
        //   this.pagination.total = response.totalCount
        //   this.pagination.pageSize = response.pageSize
        // })
      } else {
        // listTask({ ...this.queryParam }).then((response) => {
        //   this.data = response.list
        //   this.pagination.current = response.currPage
        //   this.pagination.total = response.totalCount
        //   this.pagination.pageSize = response.pageSize
        // })
      }
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination = pagination
      this.load()
    },
    handleEdit (id) {
      this.$router.push({
        path: '/task/edit',
        query: { id }
      })
    },
    handleDelete (id) {
      if (this.onDelete) {
        this.onDelete(id).then((response) => {
          this.load()
        })
      } else {
        deleteTask(id).then((res) => {
          this.message.success('删除成功')
          this.load()
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.font-style {
  color: #ffffff;
}
.row-style {
  background-color: #1890ff;
  border-radius: 3px;
}
</style>